<template>
	<view class="comp-tags">
		<div class="ticket-tag" :class="{accent: accent}" :style="{background}">
            <div v-if="showIcon && !accent" :style="{color}">
				<basic-icons name="icon148" size="26rpx" />
			</div> 
			<slot name="icon"></slot>
            <div :style="{color}">{{ item }}</div> 
          </div>
	</view>
</template>
<script>
export default {
	name: '',
	props: {
		item: { type:String, default:'' },
		showIcon: { type:Boolean, default:true  },
		accent: { type:Boolean, default:false  },
		background: { type:String, default:'rgba(255, 135, 61, 0.1)' },
		color: { type:String, default:'rgba(255, 135, 61, 1)' }
	}
}
</script>
<style lang="less">
.comp-tags{
	.ticket-tag {
		height: 32rpx;
		line-height: 32rpx;
		border-radius: 16rpx;
		padding: 0 8rpx 0 4rpx;
		display: inline-flex;
		margin-right: 16rpx;
		margin-bottom: 8rpx;
		background-color: fade(@font_tag_color, 10%);
		color: @font_tag_color;
		font-size: 20rpx;
		text-align: center;
		align-items: center;
		vertical-align: middle;
		&.accent {
			background-color: fade(@font_light_color, 10%);
			color: @font_light_color;
			padding: 0 8rpx;
		}
	}
}
</style>